/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/12/16 2:54 下午
 * @version V1.0
 */
import React, { useState, useEffect } from "react";
import styles from "./index.less";
import SectionTitle from "components/SectionTitle";
import AddSomeButton from "components/AddSomeButton";
import { Button, DatePicker, Form, Input, message, Modal, Popconfirm, Table } from "antd";
import { createListenCheck, getListenCheckList } from "api/index";
import moment from "moment";

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
};
const ListenInfo = () => {
    const [loading, setLoading] = useState(false);
    const [dataSource, setDataSource] = useState([]);
    const [visible, setVisible] = useState(false);
    const [form] = Form.useForm();
    const fetch = async () => {
        setLoading(true);
        const result = await getListenCheckList();
        if (result.status === "success") {
            const dataSource = result.result;
            setDataSource(dataSource);
        } else {
            message.error(result.message);
        }
        setLoading(false);
    };
    useEffect(() => {
        fetch();
    }, []);
    const addItem = () => {
        setVisible(true);
    };
    // const handleDelete = async ({ trainTypeId }) => {
    //     const result = await deleteTrainingType({ trainingTypeId: trainTypeId });
    //     if (result.status === "success") {
    //         message.success("删除成功");
    //         fetch();
    //     } else {
    //         message.error(result.message);
    //     }
    // };
    const title = "新增听查课";
    const columns = [
        {
            title: "授课人",
            dataIndex: "teacherName",
            align: "left"
        },
        {
            title: "讲授课程",
            dataIndex: "courseName",
            align: "left"
        },
        {
            title: "授课题目",
            dataIndex: "courseTitle",
            align: "left"
        },
        {
            title: "听课节次",
            dataIndex: "listenSection",
            align: "left"
        },
        {
            title: "听课时间",
            dataIndex: "listenTime",
            align: "left"
        },
        {
            title: "问题及建议",
            dataIndex: "advice",
            align: "left"
        },
        // {
        //     title: "操作",
        //     align: "left",
        //
        //     render: (item) => {
        //         return (
        //             <div>
        //                 <Popconfirm title="是否要删除？" onConfirm={() => handleDelete(item)}>
        //                     <Button style={{ padding: 2, color: "#C21217", fontWeight: "bold" }} type="link">删除</Button>
        //                 </Popconfirm>
        //
        //             </div>
        //         );
        //     }
        // }
    ];
    return (
        <div className={styles.pageContainer}>
            <div className={styles.pageContainerHeader}>
                <SectionTitle title={title}/>
                <div style={{ width: "220px" }} onClick={() => addItem({})}>
                    <AddSomeButton title={title}/>
                </div>
            </div>
            <div className={styles.pageContainerTable}>
                <SectionTitle title={"已有听查课"}/>
                <div className={styles.tableContainer}>
                    <Table
                        bordered={false} // 是否有边框
                        rowKey='trainTypeId' // 唯一key值
                        loading={loading} // 加载动画
                        columns={columns} // 表头
                        dataSource={dataSource}
                        pagination={false}
                    />
                </div>
            </div>
            <Modal
                title={title}
                visible={visible}
                // width="960px"
                onOk={() => {
                    form.validateFields().then(async values => {
                        values.listenTime = moment(values.listenTime).format('YYYY-MM-DD');
                        const result = await createListenCheck(values);
                        if (result.status === "success") {
                            setVisible(false);
                            fetch();
                        } else {
                            message.error(result.message);
                        }
                    }).catch(info => {
                        // console.log(info);
                    });
                }}
                onCancel={() => {
                    form.resetFields();
                    setVisible(false);
                }}
            >
                <Form
                    {...layout}
                    layout="horizontal"
                    form={form}
                    name="basic"
                    initialValues={{}}
                >
                    <Form.Item
                        label="授课人"
                        name="teacherName"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Input placeholder="请输入授课人"/>
                    </Form.Item>
                    <Form.Item
                        label="讲授课程"
                        name="courseName"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Input placeholder="请输入讲授课程"/>
                    </Form.Item>
                    <Form.Item
                        label="授课题目"
                        name="courseTitle"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Input placeholder="请输入授课题目"/>
                    </Form.Item>
                    <Form.Item
                        label="听课节次"
                        name="listenSection"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Input placeholder="请输入听课节次"/>
                    </Form.Item>
                    <Form.Item
                        label="听课时间"
                        name="listenTime"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <DatePicker style={{ width: "100%" }}/>
                    </Form.Item>
                    <Form.Item
                        label="问题及建议"
                        name="advice"
                        rules={[{ required: true, message: "必填" }]}
                    >
                        <Input.TextArea placeholder="请输入问题及建议"/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default ListenInfo;
